<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"><html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Example: Context Menu (YUI Library)</title>

                <!-- Standard reset and fonts -->

        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">

 

        <!-- CSS for Menu -->

        <link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
 

        <!-- Page-specific styles -->
        <style type="text/css">

            h1 { 

                font-weight:bold; 
                margin:0 0 1em 0;
            }

            body {
            
                padding:1em;
            
            }

            p, ul {

                margin:1em 0;

            }

            h1 em,
            p em,
            #operainstructions li em {

                font-weight:bold;

            }

            #operainstructions {

                list-style-type:square;
                margin-left:2em;

            }

            #clones {

                background:#99cc66 url(img/grass.png);

                /* Hide the alpha PNG from IE 6 */
                _background-image:none;

                width:450px;
                height:400px;
                overflow:auto;
         
            }
            
            #clones li {
            
                float:left;
                display:inline;
                border:solid 1px #000;
                background-color:#fff;
                margin:10px;
                text-align:center;
                zoom:1;
            
            }

            #clones li img {
            
                border:solid 1px #000;
                margin:5px;
            
            }
            
            #clones li cite {
            
                display:block;
                text-align:center;
                margin:0 0 5px 0;
                padding:0 5px;

            }
            
        </style>

                <!-- Namespace source file -->

        <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>

        <!-- Dependency source files -->

        <script type="text/javascript" src="../../build/event/event.js"></script>
        <script type="text/javascript" src="../../build/dom/dom.js"></script>

            
        <script type="text/javascript" src="../../build/animation/animation.js"></script>
        
        <!-- Container source file -->
        <script type="text/javascript" src="../../build/container/container_core.js"></script>

        <!-- Menu source file -->
        <script type="text/javascript" src="../../build/menu/menu.js"></script>

        <!-- Page-specific script -->
        <script type="text/javascript">

            YAHOO.example.onDOMReady = function(p_sType) {


                var oClones = document.getElementById("clones");

                // Clone the first ewe so that we can create more later

                var oLI = oClones.getElementsByTagName("li")[0];
                var oClone = oLI.cloneNode(true);


               // Renames an "Ewe"
    
                function EditEweName(p_oLI) {
    
                    var oCite = p_oLI.lastChild;
    
                    if(oCite.nodeType != 1) {
                    
                        oCite = oCite.previousSibling;
    
                    }
                
                    var oTextNode = oCite.firstChild;
    
                    var sName = 
                            window.prompt(
                                "Enter a new name for ", 
                                oTextNode.nodeValue
                            );
    
                    if(sName && sName.length > 0) {
                        
                        oTextNode.nodeValue = sName;
    
                    }
                
                }
                
    
                // Clones an "Ewe"
    
                function CloneEwe(p_oLI, p_oMenu) {

                    p_oMenu.cfg.setProperty("trigger", null);

                    var oClone = p_oLI.cloneNode(true);
    
                    p_oLI.parentNode.appendChild(oClone);

                    p_oMenu.cfg.setProperty("trigger", oClones.childNodes);
                
                }
                
    
                // Deletes an "Ewe"
    
                function DeleteEwe(p_oLI) {
    
                    var oUL = p_oLI.parentNode;
    
                    oUL.removeChild(p_oLI);
                
                }
    
    
                /*
                     Returns the LI instance that is the parent node of the target 
                     of a "contextmenu" event
                */
    
                function GetListItemFromEventTarget(p_oNode) {
    
                    if(p_oNode.tagName.toUpperCase() == "LI") {
                    
                        return p_oNode;
    
                    }
                    else {
    
                        /*
                             If the target of the event was a child of an LI, 
                             get the parent LI element
                        */
    
                        do {
        
                            if(p_oNode.tagName.toUpperCase() == "LI") {
    
                                return p_oNode;                            
                            
                            }
        
                        }
                        while((p_oNode = p_oNode.parentNode));
                    
                    }
                
                }
                
    
                // "click" event handler for each item in the ewe context menu
                
                function onEweContextMenuClick(p_sType, p_aArgs, p_oMenu) {
    
                    var oItem = p_aArgs[1];

                    if(oItem) {

                        var oLI = GetListItemFromEventTarget(this.contextEventTarget);
        
                        switch(oItem.index) {
                        
                            case 0:     // Edit name
        
                                EditEweName(oLI);
                            
                            break;
        
        
                            case 1:     // Clone
        
                                CloneEwe(oLI, this);
        
                            break;
                            
        
                            case 2:     // Delete
        
                                DeleteEwe(oLI);
        
                            break;                    
                        
                        }
                    
                    }
                
                }
    
    
                // "keydown" event handler for the ewe context menu
    
                function onEweContextMenuKeyDown(p_sType, p_aArgs, p_oMenu) {
    
                    var oDOMEvent = p_aArgs[0];
    
                    if(oDOMEvent.shiftKey) {
                    
                        var oLI = GetListItemFromEventTarget(this.contextEventTarget);
    
                        switch(oDOMEvent.keyCode) {
                        
                            case 69:     // Edit name
    
                                EditEweName(oLI);
    
                                this.hide();
    
                            break;
                            
                            case 67:     // Clone
                            
                                CloneEwe(oLI, this);
    
                                this.hide();
    
                            break;
                            
                            case 68:     // Delete
    
                                DeleteEwe(oLI);
    
                                this.hide();
                            
                            break;
                        
                        }
                    
                    }
    
                }


                // "render" event handler for the ewe context menu

                function onContextMenuRender(p_sType, p_aArgs, p_oMenu) {
    
                    //  Add a "click" event handler to the ewe context menu
    
                    this.clickEvent.subscribe(onEweContextMenuClick, oEweContextMenu, true);
                        
    
                    // Add a "keydown" event handler to the ewe context menu
    
                    this.keyDownEvent.subscribe(onEweContextMenuKeyDown,oEweContextMenu,true);
                
                }


                // "click" event handler for the field context menu

                function onFieldMenuClick(p_sType, p_aArgs, p_oMenu) {

                    // Get a reference to the item in the menu that was clicked

                    var oItem = p_aArgs[1];


                    if(oItem) {
                    
                        switch(oItem.index) {
                        
                            case 1:

                                oClones.innerHTML = "";

                                oEweContextMenu.cfg.setProperty("target", null);

                                oItem.cfg.setProperty("disabled", true);

                            break;
                            
                            case 2:

                                var oLI = this.clone.cloneNode(true);
                                
                                oClones.appendChild(oLI);

                                this.getItem(1).cfg.setProperty("disabled", false);

                                oEweContextMenu.cfg.setProperty("trigger", oClones.childNodes);

                            break;
                        
                        }

                    }
                
                }
                

                // "click" event handler for the field colors submenu

                function onFieldColorsClick(p_sType, p_aArgs, p_oMenu) {

                    // Get a reference to the item in the menu that was clicked

                    var oItem = p_aArgs[1];
                        

                    if(oItem && this.checkedItem != oItem) {

                        YAHOO.util.Dom.setStyle("clones", "backgroundColor", oItem.value);
                        
                        oItem.cfg.setProperty("checked", true);


                        this.checkedItem.cfg.setProperty("checked", false);

                        this.checkedItem = oItem;
                    
                    }

                }


                // "render" event handler for the field colors submenu

                function onFieldColorsRender(p_sType, p_aArgs, p_oMenu) {
                
                    this.checkedItem = this.getItem(0);
                
                }


                // "render" event handler for the field context menu

                function onFieldMenuRender(p_sType, p_aArgs, p_oMenu) {

                    // Get a reference to the field colors submenu

                    var oFieldColors = this.getItem(0).cfg.getProperty("submenu");


                    // Add a "render" event handler to the field colors submenu

                    oFieldColors.renderEvent.subscribe(onFieldColorsRender, oFieldColors, true);


                    // Add a "render" event handler to the field colors submenu

                    oFieldColors.clickEvent.subscribe(onFieldColorsClick, oFieldColors, true);
                    

                    // Add a "click" event handler to the field context menu

                    this.clickEvent.subscribe(onFieldMenuClick, this, true);

                }


                // Define the items for the ewe context menu

                var aMenuItems = [
                        { text: "Edit Name", helptext: "Shift + E" }, 
                        { text: "Clone", helptext: "Shift + C" }, 
                        { text: "Delete", helptext: "Shift + D" }
                    ];


                // Create the ewe context menu

                var oEweContextMenu = new YAHOO.widget.ContextMenu(
                                            "ewecontextmenu", 
                                            {
                                                trigger: oClones.childNodes,
                                                itemdata: aMenuItems,
                                                lazyload: true,
                                                effect:{ 
                                                    effect:YAHOO.widget.ContainerEffect.FADE,
                                                    duration:0.25
                                                }                                                 
                                            } 
                                        );


                // Add a "render" event handler to the ewe context menu

                oEweContextMenu.renderEvent.subscribe(onContextMenuRender, oEweContextMenu, true);


                // Define the items for the field context menu

                var oFieldContextMenuItemData = [
                
                    {
                        text:"Field color", 
                        submenu: { id:"fieldcolors", itemdata: [
                         { text:"Light Green", value:"#99cc66", checked: true }, 
                         { text:"Medium Green", value:"#669933" }, 
                         { text:"Dark Green", value:"#336600" }                        
                        ] } 
                    },
                    "Delete all", 
                    "New Ewe"
                
                ];


                // Create a context menu for the field the ewes live in

                var oFieldContextMenu = new YAHOO.widget.ContextMenu(
                                                "fieldcontextmenu",
                                                {
                                                    trigger: "clones",
                                                    itemdata: oFieldContextMenuItemData,
                                                    lazyload: true,
                                                    effect:{ 
                                                        effect:YAHOO.widget.ContainerEffect.FADE,
                                                        duration:0.1
                                                    }                                                     
                                                }
                                            );
                
                oFieldContextMenu.clone = oClone;


                // Add a "render" event handler to the field context menu

                oFieldContextMenu.renderEvent.subscribe(onFieldMenuRender, oFieldContextMenu, true);

            };


            // Assign a "load" event handler to the window

            YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
                    
        </script>

    </head>
    <body>

        <h1>Example: Context Menu (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>

        <p>This example features two context menus.  There is one for each ewe that is created and one for the green field that the ewes graze in.  You can use the ewe context menu to rename, clone or delete Dolly.   The field's context menu allows you to delete all the ewes from the field, add a new ewe and modify the color of the grass.</p>

        <p><em>Please Note:</em> Opera users will need to do the following to use this example:</p>

        <ul id="operainstructions">
            <li><em>Opera for Windows:</em>  Hold down the control key and click with the left mouse button.</li>
            <li><em>Opera for OS X:</em>  Hold down the command key (&#8984;) and click with the left mouse button.</li>
        </ul>

        <ul id="clones">
            <li><a href="http://en.wikipedia.org/wiki/Dolly_%28clone%29"><img src="img/dolly.jpg" width="100" height="100" alt="Dolly, a ewe, the first mammal to have been successfully cloned from an adult cell."></a><cite>Dolly</cite></li>
        </ul>

    </body>
</html>